// 组件 provide ， inject 功能
import { h, provide, inject } from '../../lib/guide-coco-mini-vue.esm.js'

/**
 * 功能概要： 
 * 1. 父组件不存在向上查找爷爷组件
 * 2. 父组件有，使用父组件，如果只重写部分数据，未重写部分使用爷爷组件数据. 基于原型链 Object.create(parentProvide) 实现
 * 3. inject 支持默认数据（包括变量和函数）
 */


const GrandFather = {
    name: "GrandFather",
    setup() {
        const name = 70;
        const age = 70;
        provide('name', '老张');
        provide('age', '70');
        return { name, age }
    },
    render() {
        return h('div', {}, [h('p', {}, `爷爷组件 GrandFather --  自身数据： name  : ${this.name} , age :${this.age}`), h(Father)])
    }
}


const Father = {
    name: "Father",
    setup() {
        provide('name', '大张');
        // provide('age', '40');

        const name = inject('name');
        const age = inject('age');

        return {
            name, age
        }
    },
    render() {
        return h('div', {}, [h('p', {}, `父组件 Father --   显示获取爷爷组件 inject 数据 name : ${this.name} , age :${this.age}`), h(Son)])
    }
}


const Son = {
    name: "Son",
    setup() {
        const name = inject('name');
        const age = inject('age');
        const address = inject('address', '默认地址数据:深圳市南山区xxx!');
        const tel = inject('tel', () => '默认函数格式电话： 132xxxx0001');

        provide('name', '小张');
        provide('age', '18');
        return { name, age, address, tel }
    },
    render() {
        return h('div', {}, [h('p', {}, `子组件 Son --  显示获取父组件 inject 数据 name : ${this.name} , age :${this.age} , address :${this.address} , tel :${this.tel}`)])
    }
}




export default {
    name: "App",
    setup() {
        return {}
    },
    render() {
        return h("div", {}, [h('p', {}, "mini-vue api Provider/Inject "), h(GrandFather)])
    }
}